<script setup>
import { defineProps, defineEmits } from 'vue'
import { showDialog } from 'vant'

const props = defineProps({
  applications: {
    type: Array,
    required: true
  },
  statusMap: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['view-details', 'approve-application', 'reject-application'])

// 审批人可以查看详情、审批通过、审批拒绝
function handleViewDetails(application) {
  emit('view-details', application)
}

function handleApprove(application) {
  showDialog({
    title: '确认审批',
    message: `确定要审批通过申请"${application.title}"吗？`,
    showCancelButton: true,
    confirmButtonText: '通过',
    cancelButtonText: '取消'
  }).then(() => {
    emit('approve-application', application)
  }).catch(() => {
    // 用户取消
  })
}

function handleReject(application) {
  showDialog({
    title: '确认拒绝',
    message: `确定要拒绝申请"${application.title}"吗？`,
    showCancelButton: true,
    confirmButtonText: '拒绝',
    cancelButtonText: '取消'
  }).then(() => {
    emit('reject-application', application)
  }).catch(() => {
    // 用户取消
  })
}

// 审批人可以操作的状态
function canApprove(application) {
  return application.status === 'pending'
}

// 获取申请人信息（示例数据）
function getApplicantInfo(application) {
  const applicantMap = {
    '1': '张三 - 行政部',
    '2': '李四 - 生产部',
    '3': '王五 - 维修部',
    '4': '赵六 - 销售部',
    '5': '钱七 - 研发部'
  }
  return applicantMap[application.id] || '未知申请人'
}
</script>

<template>
  <div class="approver-view">
    <template v-for="application in applications" :key="application.id">
      <van-card class="application-card">
        <template #title>
          <div class="card-header">
            <h3 class="application-title">{{ application.title }}</h3>
            <div class="action-buttons">
              <van-button
                type="primary"
                size="small"
                round
                @click="handleViewDetails(application)"
                class="detail-btn"
              >
                详情
              </van-button>
              
              <van-button
                v-if="canApprove(application)"
                type="success"
                size="small"
                round
                @click="handleApprove(application)"
                class="approve-btn"
              >
                通过
              </van-button>
              
              <van-button
                v-if="canApprove(application)"
                type="danger"
                size="small"
                round
                @click="handleReject(application)"
                class="reject-btn"
              >
                拒绝
              </van-button>
            </div>
          </div>
        </template>
        
        <template #desc>
          <div class="application-info">
            <div class="applicant-row">
              <span class="label">申请人：</span>
              <span class="applicant-value">{{ getApplicantInfo(application) }}</span>
            </div>
            
            <div class="status-row">
              <span class="label">状态：</span>
              <van-tag 
                :color="statusMap[application.status].color"
                size="medium"
                round
              >
                {{ statusMap[application.status].text }}
              </van-tag>
            </div>
            
            <div class="time-row">
              <span class="label">申请时间：</span>
              <span class="time-value">{{ application.modifyTime }}</span>
            </div>
            
            <div v-if="application.description" class="desc-row">
              <span class="label">申请内容：</span>
              <span class="desc-value">{{ application.description }}</span>
            </div>
          </div>
        </template>
      </van-card>
    </template>
  </div>
</template>

<style scoped>
.approver-view {
  padding: 16px 0;
}

.application-card {
  margin-bottom: 16px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: white;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.application-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.application-card :deep(.van-card__header) {
  padding: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.application-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  flex: 1;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.application-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.applicant-row,
.status-row,
.time-row,
.desc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.label {
  color: #7c8db5;
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
  min-width: 80px;
}

.applicant-value,
.time-value {
  color: #5a6c7d;
  font-size: 14px;
}

.desc-value {
  color: #5a6c7d;
  font-size: 14px;
  line-height: 1.4;
  flex: 1;
}

.detail-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
  border: none;
  min-width: 60px;
}

.approve-btn {
  background: linear-gradient(135deg, #07c160 0%, #52c41a 100%);
  border: none;
  min-width: 60px;
}

.reject-btn {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
  border: none;
  min-width: 60px;
}

/* 待审批的申请卡片高亮 */
.application-card:has(.approve-btn) {
  border-left: 4px solid #07c160;
}

/* 响应式设计 */
@media (max-width: 375px) {
  .card-header {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .action-buttons {
    justify-content: flex-end;
  }
  
  .applicant-row,
  .status-row,
  .time-row,
  .desc-row {
    flex-direction: column;
    gap: 4px;
  }
  
  .label {
    min-width: auto;
  }
}
</style> 